<template>
    <section class="content">
        <div class="setting-block">
            <h3>|&nbsp;账号设置</h3>
            <div>账户密码</div>
            <p>
                <span>绑定邮箱</span><span>{{ email }}</span>
                <span @click="emailModal = true" style="color:#02C5FF;cursor:pointer">修改</span>
            </p>
            <p>
                <span>登录密码</span><span>******</span>
                <span @click="passwordModal = true" style="color:#02C5FF;cursor:pointer">修改</span>
            </p>
            <div>邮件提醒</div>
            <article>
                <div>系统私信</div>
                <div>
                    <p>客服消息、比赛通知、产品更新等系统私信</p>
                    <RadioGroup v-model="systemMessage" @on-change="SystemMessage">
                        <Radio label="1">接收</Radio><Radio label="0">不接收</Radio>
                    </RadioGroup>
                </div>
            </article>
            <article>
                <div>组队消息</div>
                <div>
                    <p>报名比赛后的用户组队申请与组队邀请等消息</p>
                    <RadioGroup v-model="groupMessage" @on-change="GroupMessage">
                        <Radio label="1">接收</Radio><Radio label="0">不接收</Radio>
                    </RadioGroup>
                    
                </div>
            </article>
            <article>
                <div>提醒消息</div>
                <div>
                    <p>项目被折叠，论坛回复，团队成员变动，组队申请状态变动等消息提醒</p>
                    <RadioGroup v-model="remindMessage" @on-change="RemindMessage">
                        <Radio label="1">接收</Radio><Radio label="0">不接收</Radio>
                    </RadioGroup>
                </div>
            </article>
        </div>
        <Modal
            v-model="emailModal"
            :mask-closable="false"
            width="360"
            title="修改/绑定邮箱">
            <Form :label-width="40">
                <FormItem>
                    <Input type="password" placeholder="登录密码" style="width:250px" v-model="emailForm.password"/>
                </FormItem>
                <FormItem>
                    <Input type="text" placeholder="新的邮箱" style="width:250px" v-model="emailForm.email"/>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button style="backgroundColor:#02C5FF;color:#fff;outline:none" @click="changeEmail">提交</Button>
            </div>  
        </Modal>
         <Modal
            v-model="passwordModal"
            :mask-closable="false"
            width="360"
            title="修改密码">
            <Form :label-width="40">
                <FormItem>
                    <Input type="password" style="width:250px" placeholder="登录密码" v-model="passwordForm.oldPassword"/>
                </FormItem>
                <FormItem>
                    <Input type="password" style="width:250px" placeholder="新的密码" v-model="passwordForm.newPassword"/>
                </FormItem>
                <FormItem>
                    <Input type="password" style="width:250px" placeholder="确认密码" v-model="passwordForm.confirmPassword"/>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button style="backgroundColor:#02C5FF;color:#fff;outline:none" @click="changePassword">提交</Button>
            </div>  
        </Modal>
    </section>
</template>

<script>
import { mapActions } from 'vuex';
export default {
    computed:{
        email(){
            return localStorage.getItem("email")
        }
    },
    data(){
        return{
            emailModal:false,
            passwordModal:false,
            systemMessage:"",
            groupMessage:"",
            remindMessage:"",
            emailForm:{
                password:"",
                email:""
            },
            passwordForm:{
                oldPassword:"",
                newPassword:"",
                confirmPassword:""
            }
        }
    },
    methods:{
        ...mapActions(['XgetMessageConfig','XmodifyMessageConfig','XmodifyEmail','XmodifyPassword']),
        SystemMessage(value){
            this.XmodifyMessageConfig({item:"SYSTEM_MESSAGE",value:value}).then(res => {
                this.$Message.success("修改成功")
            })
        },
        GroupMessage(value){
            this.XmodifyMessageConfig({item:"GROUP_MESSAGE",value:value}).then(res => {
                this.$Message.success("修改成功")
            })
        },
        RemindMessage(value){
            this.XmodifyMessageConfig({item:"REMIND_MESSAGE",value:value}).then(res => {
                this.$Message.success("修改成功")
            })
        },
        changeEmail(){
            this.XmodifyEmail(this.emailForm).then(res => {
                this.$Message.success("修改成功");
                localStorage.setItem("email",this.emailForm.email);
                this.emailModal = false;
            }).catch(err => {
                this.$Message.error(err.response.data.message)
            })
        },
        changePassword(){
            if(this.passwordForm.newPassword.trim() !== this.passwordForm.confirmPassword.trim()){
                this.$Message.error('两次密码输入不一致');
            }else{
                this.XmodifyPassword(this.passwordForm).then(res => {
                    this.$Message.success("修改成功");
                    setTimeout(()=>{
                        this.logout().then(res => {
                            this.$router.push({path:"/login"})
                        })
                    },1000)
                }).catch(err => {
                    this.$Message.error(err.response.data.message)
                })
            }
        }
    },
     mounted(){
        this.XgetMessageConfig().then(res => {
            if(res.data.length){
                res.data.forEach(element => {
                    if(element.item === 'SYSTEM_MESSAGE'){
                        this.systemMessage = String(element.value)
                    }else if(element.item === 'GROUP_MESSAGE'){
                        this.groupMessage = String(element.value)
                    }else if(element.item === 'REMIND_MESSAGE'){
                        this.remindMessage = String(element.value)
                    }
                })
            }else{
                this.groupMessage = this.remindMessage = this.systemMessage = "1" ; 
            }
        })
    }
}
</script>

<style lang="scss" scoped>
    .content{
        flex:1;
        min-width: 1200px;
        background-color:#f9fafa;
    }
    .setting-block{
        width: 1000px;
        padding: 20px;
        margin: 30px auto;
        background-color: #fff;

        & > h3{
            margin-bottom:60px;
        }

        & > div{
            margin-top: 30px;
            font-weight:400;
            color:rgba(51,51,51,1);
            font-size:16px;
        }

         & > p,article{
            font-weight:400;
            color:rgba(102,102,102,1);
            font-size:12px;

            span{
                display: inline-block;
                margin: 20px 20px 20px 0;
            }
        }

        & > article{
            margin: 20px 0;
            display: flex;

            div{
                margin-right: 20px;
            }
        }
    }
</style>